<template>
	<div class="User_Order">
		<div class="User_box">
			<div class="User_box_top">
				<p>全部订单</p>
				<span>查看全部<i class="iconfont">&#xe62d;</i></span>
			</div>
			<div class="User_box_bottom">
				<ol v-for="item in pictlist" :key="item.id">
					<li>
						<img :src="item.img"/>
						<p>{{item.txt}}</p>
					</li>
				</ol>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'User_Order',
		data(){
			return{
				pictlist:[
					{id:1,img:'grimg/1.png',txt:'待付款'},
					{id:2,img:'grimg/2.png',txt:'已付款'},
					{id:3,img:'grimg/3.png',txt:'待评价'},
					{id:4,img:'grimg/4.png',txt:'退款/售后'},
				]
			}
		}
	}
</script>

<style scoped>
	.User_Order{
		margin-top: 1.5rem;
		height: 9rem;
		width: 100%;
		background-color: #f5f5f5;
		
		display: flex;
		align-items: center;/* 水平居中 */
		justify-content: center;/* 垂直居中 */
	}
	.User_Order .User_box{
		height: 7rem;
		width: 94%;
		background-color: white;
	}
	.User_Order .User_box .User_box_top{
		height: 3rem;
		width: 100%;
	}
	.User_Order .User_box .User_box_top p{
		float: left;
		padding-left: 0.4rem;
		padding-top: 1rem;
	}
	.User_Order .User_box .User_box_top span{
		float: right;
		color: gray;
		padding-right: 0.4rem;
		padding-top: 1rem;
		font-size: 0.2rem;
	}
	.User_Order .User_box .User_box_top i{
		font-size: 0.5rem;
	}
	.User_Order .User_box .User_box_bottom{
		text-align: center;
		width: 100%;
		
		background-color: #FF7110;
	}
	.User_Order .User_box .User_box_bottom ol li{
		width: 25%;
		float: left;
	}
	.User_Order .User_box .User_box_bottom img{
		width: 2rem;
		
	}
	.User_Order .User_box .User_box_bottom p{
		font-size: 0.8rem;
		
	}
</style>
